<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #div1{
            position: absolute;
            width: 80px;
            height: 100%;
            background: #FED057;
            cursor: e-resize;
        }
    </style>
</head>
<body style="background: rgba(16,21,39,0.6)">
  <div id="div1"></div>

  <script type="text/javascript">
      var oDiv = document.getElementById('div1');

      oDiv.onmousedown = function (ev) {
          document.onmousemove = function (ev) {
              var oEvent = ev || event;

              var iWidth = oEvent.clientX;
              if(iWidth<80){
                  iWidth = 80;
              }

              oDiv.style.width = iWidth+'px' ;

              document.title = oEvent.clientX;
          };

          document.onmouseup = function () {
              document.onmousemove = null;
              document.onmouseup = null;
          }
      };






  </script>

</body>
</html>